import { Layout, Menu, Popover, Image } from 'antd';
import { startTransition, useEffect } from 'react';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { ProductOutlined, FlagOutlined } from '@ant-design/icons';
import styles from './style.module.less';
import useWorkbenchStore from './store';
import { RouteNames } from '../../router';
import UserBox from '../../components/UserBox';
import useGlobalStore from '@/store';
import { IMAGES } from '@/assets';

const { Sider, Content } = Layout

export default function Workbench() {
    const location = useLocation();
    const navigate = useNavigate();
    const store = useWorkbenchStore()
    const globalStore = useGlobalStore(({ userInfo }) => ({ userInfo }))

    useEffect(() => {
        const { pathname } = location

        if (pathname === RouteNames.Workbench || !Object.values(RouteNames).includes(pathname as RouteNames)) {
            // 跳转到知识库
            navigate(RouteNames.KnowledgeLib)
        }

        store.setSelectedMenu(pathname)
    }, [location.pathname])

    /**
     * 菜单切换
     * @param item 
     */
    const onMenuChange = (item: { key: string }) => {
        startTransition(() => {
            // 跳转路由
            navigate(item.key)
        });
    }

    return (
        <Layout className={styles['workbench']}>
            <Sider defaultCollapsed collapsedWidth={64}>
                <div className={styles["workbench-logo"]}>
                    <Popover
                        overlayClassName={styles['workbench-popover']}
                        placement="rightTop"
                        content={<UserBox />}
                    >
                        <Image
                            width='48px'
                            src={globalStore.userInfo?.avatar ?? IMAGES.DEAULT_CIRCLEUSER}
                            className={styles['workbench-profile-avatar']}
                            preview={false}
                        />
                    </Popover>
                </div>
                <Menu
                    mode="inline"
                    selectedKeys={[store.selectedMenu]}
                    items={[
                        {
                            key: RouteNames.KnowledgeLib,
                            icon: <ProductOutlined />,
                            label: '知识库',
                        },
                        // {
                        //     key: RouteNames.LabelManage,
                        //     icon: <FlagOutlined />,
                        //     label: '标签管理',
                        // }
                    ]}
                    onSelect={onMenuChange}
                />
            </Sider>
            <Content>
                <Outlet />
            </Content>
        </Layout>
    )
}